<!DOCTYPE html>
<html lang="zh-cmn-Hans" style="height: 100%">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
  
<!--    <link rel="manifest" href="http://chat.henrize.kim:3000/manifest.json">-->
<!--
    <link rel="stylesheet" href="files/style.css">
    <link id="scheme-link" rel="stylesheet" href="files/a.css">
-->

    <link rel="stylesheet" href="files/katex.css">
<!--    <script src="files/hm.js"></script><script src="files/katex.js"></script>-->
    <script src="files/remarkableKatex.js"></script>

    <script src="files/highlight.js"></script>
    <link id="highlight-link" rel="stylesheet" href="files/hybrid.css">
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.0/remarkable.min.js"></script>-->
    <script src="http://chat.henrize.kim:3000/vendor/remarkable/remarkable.min.js"></script>
  
    <title>Hack.Chat</title>
<!--    <link rel="stylesheet" href="mdui/css/mdui.css">-->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-88818678-1');
    </script>

<!--
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?a9259cf9514395ebcad803f195ef0997";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
-->
    <style type="text/css">
    .round_icon{
      width: 34px;
      height: 34px;
      display: flex;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    </style>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-loaded mdui-theme-primary-pink mdui-theme-accent-yellow mdui-theme-layout-dark">
<header class="mdui-appbar mdui-appbar-fixed">
  <div class="mdui-toolbar mdui-color-theme">
    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
      mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
<!--    <a href="/" class="mdui-typo-headline mdui-hidden-xs">Henrize 聊天室</a>-->
    <div class="mdui-tab mdui-tab-centered" mdui-tab id="chat-tabs" style="width: 100%">
      
    </div>
    <div class="mdui-toolbar-spacer"></div>
    <button class="mdui-btn mdui-btn-icon" mdui-dialog="{target: '#chat-new-room'}"><i class="mdui-icon material-icons">content_copy</i></button>
    <button class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#chat-more_vert'}"><i class="mdui-icon material-icons">more_vert</i></button>
    <ul class="mdui-menu" id="chat-more_vert">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Cancel</a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" mdui-dialog="{target: '#chat-new-room'}" class="mdui-ripple">New Room</a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" onclick="closeRoom(tabNow);" class="mdui-ripple">Close Room</a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" onclick="new mdui.Dialog($('#chat-dialog-sidebar')).open();" class="mdui-ripple">Settings</a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" mdui-dialog="{target: '#dialog-docs-theme'}" class="mdui-ripple">Theme</a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
<!--        <a href="javascript:;" mdui-dialog="{target: '#dialog-imgbed'}" class="mdui-ripple">图床</a>-->
        <a href="https://sm.ms"  target="_blank" class="mdui-ripple">Image Bed</a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" mdui-dialog="{target: '#chat-dialog-about'}" class="mdui-ripple">About</a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="" class="mdui-ripple">Logout/Refresh</a>
      </li>
<!--
      <li class="mdui-menu-item">
        <a href="javascript:;" onclick="window.location.href = window.location.href.slice(0, window.location.href.indexOf('?'))" class="mdui-ripple">回到首页</a>
      </li>
-->
    </ul>
  </div>
  <div class="mdui-progress" id="wenku8-progress" style="display: none;">
      <div class="mdui-progress-indeterminate"></div>
  </div>
</header>

<div class="mdui-drawer" id="main-drawer">
  <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
    <div class="mdui-collapse-item">
      <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color">near_me</i>
        <div class="mdui-list-item-content">About</div>
        <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
      </div>
      <div class="mdui-collapse-item-body mdui-list">
        <a href="https://github.com/LanceLiang2018/lanceliang2018.github.io/tree/master/chat"
           class="mdui-list-item mdui-ripple">This page</a>
      </div>
      <div class="mdui-collapse-item-body mdui-list">
        <a href="https://hack.chat/"
           class="mdui-list-item mdui-ripple">Main host</a>
      </div>
    </div>
  </div>
</div>

<div id="chat-frames">
</div>

<div class="mdui-dialog" id="chat-dialog-agreement">
  <div class="mdui-dialog-title">Henrize聊天室服务协议</div>
  <div class="mdui-dialog-content mdui-typo">
    <p>一、Henrize聊天室服务协议（以下简称“本协议”）是您与Henrize聊天室（以下简称“本聊天室”）在您使用聊天室时所订下的协议。</p>
    <p>二、聊天室运营和开发团队（以下简称“我们”）将使用包括但不限于网页浏览器软件、包含网页浏览器的软件、聊天室提供的API、有关软件访问本聊天室的服务器并进行加入聊天室、浏览、发布消息或接收消息等操作视为使用聊天室的服务（以下简称“本服务”）。</p>
    <p>三、在您使用本服务时，我们有义务为您提供域名购买和解析、软件开发、消息转发等服务。但是我们不保证我们的服务稳定且符合您的期望，同时我们不该为任何原因所造成的意外和服务终止负责。</p>
    <p>四、在使用本聊天室的服务前，您应该首先完全阅读、完全理解、完全同意并完全遵守本协议和相关法律。如果您不在中国大陆范围内居住，您还应当同时遵守当地的法律规定。</p>
    <p>五、本聊天室会在服务器依法保存您的IP地址、设备信息、访问记录和聊天记录，本聊天室保证不会在您不违法的情况下将保存的数据向第三方（公安部门等有关司法部门除外）进行披露和分享。</p>
    <p><strong>六、您不得将本聊天室用于非法用途，一旦您在本网站进行了任何违反中华人民共和国法律的行为，本网站有权永久拒绝您的访问。</strong></p>
    <p>七、聊天室提倡友好愉快地交流。我们将包括但不限于恶意攻击他人、事物或组织、恶意在短时间内发送大量无意义的包括但不限于文字信息或图片信息、发送令大多数人厌恶或产生不适的包括但不限于文字信息或图片信息、恶意宣传个人、事物或组织视为“发送不友好的消息”的行为。对于以上行为，我们有权加以警告和封禁。</p>
    <p>八、您不得将本聊天室用于商业用途，一旦您在本网站进行了任何商业性行为，本网站有权永久拒绝您的访问。</p>
    <p>九、本聊天室有权在必要时修改本协议条款。您可以在相关页面中查阅最新的协议条款。本协议条款变更后，如果您继续使用本服务，即视为您已接受修改后的协议。如果您不接受修改后的协议，应当停止使用本服务。</p>
    <p>十、有关本网站的源码和文字版权问题，请参见版权页。</p>
    <p>上述内容可能有所变更，请参照最新<a href='http://chat.henrize.kim:3000/agreement.html'>服务协议</a>。</p>
    <hr/>
    <p>Henrize Chat Dev Team</p>
    <p>2020/03/03</p>
  </div>
</div>
  
<!--
<div class="mdui-dialog" id="dialog-imgbed">
  <div class="mdui-dialog-content">
    <form enctype="multipart/form-data">
      <input name="file" type="file" id="file"/>
    </form>
    <button onclick="imgbedUpload()" class="mdui-btn mdui-ripple">上传</button>
    <div class="mdui-typo" id="imgbed-result"></div>
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" onclick="openNewRoom()">ok</button>
  </div>
    <iframe src="https://sm.ms/"></iframe>
</div>
-->

<div class="mdui-dialog" id="chat-dialog-about">
  <div class="mdui-dialog-title">About</div>
  <div class="mdui-dialog-content">
    <div class="mdui-typo">
      <h3><a href="/">Henrize Chat</a></h3>
      <p>Source using hack.chat</p>
    </div>
    <hr/>
    <ul class="mdui-list">
      <li class="mdui-list-item mdui-ripple"><a href="https://github.com/LanceLiang2018" style="height: 100%; width: 100%">Front End: Lance Liang</a></li>
    </ul>
  </div>
</div>

<div class="mdui-dialog" id="chat-new-room">
  <div class="mdui-dialog-title">Enter New Room</div>
  <div class="mdui-dialog-content">
    <div class="mdui-textfield mdui-textfield-floating-label">
      <label class="mdui-textfield-label">Room Name</label>
      <input class="mdui-textfield-input" type="text" value="lounge" id="chat-new-room-text">
    </div>
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" onclick="openNewRoom()" mdui-dialog-confirm>ok</button>
  </div>
</div>

<div class="mdui-dialog" id="chat-dialog-sidebar">
    <div class="mdui-dialog-title">Settings</div>
    <div class="mdui-dialog-content mdui-typo">
      <div id="chat-sidebar-content">
        <p>*Only avaliable for new rooms.*</p>
        <p>
          <label class="mdui-checkbox">
            <input type="checkbox" id="enter-send" checked=""/>
              <i class="mdui-checkbox-icon"></i>
              Enter+Ctrl To Send
          </label>
        </p>
        <p>
          <label class="mdui-checkbox">
            <input type="checkbox" id="emote" checked=""/>
              <i class="mdui-checkbox-icon"></i>
              Emote
          </label>
        </p>
        <p>
          <label class="mdui-checkbox">
            <input type="checkbox" id="sound-switch"/>
              <i class="mdui-checkbox-icon"></i>
               Sound notifications
          </label>
        </p>
        <p>
          <label class="mdui-checkbox">
            <input type="checkbox" id="notify-switch"/>
              <i class="mdui-checkbox-icon"></i>
               Screen notifcations
          </label>
        </p>
        <p>
          <label class="mdui-checkbox">
            <input type="checkbox" checked="" id="joined-left"/>
              <i class="mdui-checkbox-icon"></i>
              Join/left notify
          </label>
        </p>
        <p>
          <label class="mdui-checkbox">
            <input type="checkbox" checked="" id="parse-latex"/>
              <i class="mdui-checkbox-icon"></i>
               Allow LaTeX
          </label>
        </p>
        <p>
          <label class="mdui-checkbox">
            <input type="checkbox" checked="" id="syntax-highlight"/>
              <i class="mdui-checkbox-icon"></i>
               Allow Hightlight
          </label>
        </p>
        <p>
          <label class="mdui-checkbox">
            <input type="checkbox" checked="" id="allow-imgur"/>
              <i class="mdui-checkbox-icon"></i>
              Allow Imgurl
          </label>
        </p>
        <p>
          </p><h4>Highlight scheme</h4>
          <select id="highlight-selector" class="mdui-select" mdui-select><option value="agate">agate</option><option value="androidstudio">androidstudio</option><option value="atom-one-dark">atom-one-dark</option><option value="darcula" selected="selected">darcula</option><option value="github">github</option><option value="rainbow">rainbow</option><option value="tomorrow">tomorrow</option><option value="xcode">xcode</option><option value="zenburn">zenburn</option></select>
        <p></p>
        <p>
          <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent" id="clear-messages">Clear All Messages</button>
        </p>
      </div>
    </div>
</div>
  
<div class="mdui-dialog mdui-dialog-open" id="dialog-docs-theme">
  <div class="mdui-dialog-title">Setup Theme</div>
  <div class="mdui-dialog-content" style="height: 186px;">

    <p class="mdui-typo-title">Theme Color</p>
    <div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
      <div class="mdui-col">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-layout" value="" checked="">
          <i class="mdui-radio-icon"></i>
          Light
        </label>
      </div>
      <div class="mdui-col">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-layout" value="dark">
          <i class="mdui-radio-icon"></i>
          Dark
        </label>
      </div>
    </div>

    <p class="mdui-typo-title mdui-text-color-theme">Primary Color</p>
    <form class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
      <div class="mdui-col mdui-text-color-amber">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="amber">
          <i class="mdui-radio-icon"></i>
          Amber
        </label>
      </div>
      <div class="mdui-col mdui-text-color-blue">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="blue">
          <i class="mdui-radio-icon"></i>
          Blue
        </label>
      </div>
      <div class="mdui-col mdui-text-color-blue-grey">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="blue-grey">
          <i class="mdui-radio-icon"></i>
          Blue Grey
        </label>
      </div>
      <div class="mdui-col mdui-text-color-brown">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="brown">
          <i class="mdui-radio-icon"></i>
          Brown
        </label>
      </div>
      <div class="mdui-col mdui-text-color-cyan">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="cyan">
          <i class="mdui-radio-icon"></i>
          Cyan
        </label>
      </div>
      <div class="mdui-col mdui-text-color-deep-orange">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="deep-orange">
          <i class="mdui-radio-icon"></i>
          Deep Orange
        </label>
      </div>
      <div class="mdui-col mdui-text-color-deep-purple">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="deep-purple">
          <i class="mdui-radio-icon"></i>
          Deep Purple
        </label>
      </div>
      <div class="mdui-col mdui-text-color-green">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="green">
          <i class="mdui-radio-icon"></i>
          Green
        </label>
      </div>
      <div class="mdui-col mdui-text-color-grey">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="grey">
          <i class="mdui-radio-icon"></i>
          Grey
        </label>
      </div>
      <div class="mdui-col mdui-text-color-indigo">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="indigo" checked="">
          <i class="mdui-radio-icon"></i>
          Indigo
        </label>
      </div>
      <div class="mdui-col mdui-text-color-light-blue">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="light-blue">
          <i class="mdui-radio-icon"></i>
          Light Blue
        </label>
      </div>
      <div class="mdui-col mdui-text-color-light-green">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="light-green">
          <i class="mdui-radio-icon"></i>
          Light Green
        </label>
      </div>
      <div class="mdui-col mdui-text-color-lime">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="lime">
          <i class="mdui-radio-icon"></i>
          Lime
        </label>
      </div>
      <div class="mdui-col mdui-text-color-orange">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="orange">
          <i class="mdui-radio-icon"></i>
          Orange
        </label>
      </div>
      <div class="mdui-col mdui-text-color-pink">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="pink">
          <i class="mdui-radio-icon"></i>
          Pink
        </label>
      </div>
      <div class="mdui-col mdui-text-color-purple">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="purple">
          <i class="mdui-radio-icon"></i>
          Purple
        </label>
      </div>
      <div class="mdui-col mdui-text-color-red">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="red">
          <i class="mdui-radio-icon"></i>
          Red
        </label>
      </div>
      <div class="mdui-col mdui-text-color-teal">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="teal">
          <i class="mdui-radio-icon"></i>
          Teal
        </label>
      </div>
      <div class="mdui-col mdui-text-color-yellow">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-primary" value="yellow">
          <i class="mdui-radio-icon"></i>
          Yellow
        </label>
      </div>
    </form>

    <p class="mdui-typo-title mdui-text-color-theme-accent">Accent Color</p>
    <form class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
      <div class="mdui-col mdui-text-color-amber">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="amber">
          <i class="mdui-radio-icon"></i>
          Amber
        </label>
      </div>
      <div class="mdui-col mdui-text-color-blue">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="blue">
          <i class="mdui-radio-icon"></i>
          Blue
        </label>
      </div>
      <div class="mdui-col mdui-text-color-cyan">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="cyan">
          <i class="mdui-radio-icon"></i>
          Cyan
        </label>
      </div>
      <div class="mdui-col mdui-text-color-deep-orange">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="deep-orange">
          <i class="mdui-radio-icon"></i>
          Deep Orange
        </label>
      </div>
      <div class="mdui-col mdui-text-color-deep-purple">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="deep-purple">
          <i class="mdui-radio-icon"></i>
          Deep Purple
        </label>
      </div>
      <div class="mdui-col mdui-text-color-green">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="green">
          <i class="mdui-radio-icon"></i>
          Green
        </label>
      </div>
      <div class="mdui-col mdui-text-color-indigo">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="indigo">
          <i class="mdui-radio-icon"></i>
          Indigo
        </label>
      </div>
      <div class="mdui-col mdui-text-color-light-blue">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="light-blue">
          <i class="mdui-radio-icon"></i>
          Light Blue
        </label>
      </div>
      <div class="mdui-col mdui-text-color-light-green">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="light-green">
          <i class="mdui-radio-icon"></i>
          Light Green
        </label>
      </div>
      <div class="mdui-col mdui-text-color-lime">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="lime">
          <i class="mdui-radio-icon"></i>
          Lime
        </label>
      </div>
      <div class="mdui-col mdui-text-color-orange">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="orange">
          <i class="mdui-radio-icon"></i>
          Orange
        </label>
      </div>
      <div class="mdui-col mdui-text-color-pink">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="pink" checked="">
          <i class="mdui-radio-icon"></i>
          Pink
        </label>
      </div>
      <div class="mdui-col mdui-text-color-purple">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="purple">
          <i class="mdui-radio-icon"></i>
          Purple
        </label>
      </div>
      <div class="mdui-col mdui-text-color-red">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="red">
          <i class="mdui-radio-icon"></i>
          Red
        </label>
      </div>
      <div class="mdui-col mdui-text-color-teal">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="teal">
          <i class="mdui-radio-icon"></i>
          Teal
        </label>
      </div>
      <div class="mdui-col mdui-text-color-yellow">
        <label class="mdui-radio mdui-m-b-1">
          <input type="radio" name="doc-theme-accent" value="yellow">
          <i class="mdui-radio-icon"></i>
          Yellow
        </label>
      </div>
    </form>

  </div>
  <div class="mdui-divider"></div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple mdui-float-left" mdui-dialog-cancel="">Default</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm="">ok</button>
  </div>
</div>
  
<footer id="footer" style="position: absolute; bottom: 0; width: 100%; display:none">
  <div class="container">
    <form id="chatform" class="message">
      <div class="mdui-textfield">
        <textarea id="chatinput" class="mdui-textfield-input" type="text" placeholder="Message" autocomplete="off" autofocus=""></textarea>
      </div>
    </form>
  </div>
</footer>

<!--
<script type="application/javascript">
  // Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
  if (/Android/gi.test(navigator.userAgent)) {
    window.addEventListener('resize', function () {
      if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
          window.setTimeout(function () {
          document.activeElement.scrollIntoViewIfNeeded();
        }, 0);
      }
    })
  }
</script>
-->

<!--<script src="files/jquery.min.js"></script>-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--    <script src="https://cdn-1254016670.cos-website.ap-chengdu.myqcloud.com/using/showdown.min.js"></script>-->
<!--    <script src="https://cdn-1254016670.cos-website.ap-chengdu.myqcloud.com/using/cos-js-sdk-v5.js"></script>-->
<!--<script src="mdui/js/mdui.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
<script>var $$ = mdui.JQ;</script>
<script>var $_ = $</script>
<script src="files/client.js"></script>
<script type="application/javascript">
  resize = function() {
    $$('.chat-frame').height($$('html').height() - $$('header').height() - 5);
  };
  window.onresize = resize;
  $$(document).ready(resize);
  frameCount = 0;
  tabNow = 0;
  var gtabs = new Array();
  
  function tabShow(target) {
//    console.log('tabshow', target);
//    tabNow = ('' + target).slice(('' + target).lastIndexOf('-')+1);
    tabNow = '' + target;
    jQuery('.chat-frame').hide();
    jQuery('.chat-tab').css('font-weight', '');
    jQuery('#chat-frame-' + target).show();
//    debugger;
    jQuery('#chat-tab-' + target).removeClass('mdui-color-theme-accent');
    jQuery('#chat-tab-' + target).css('font-weight', '600');
    
    frames = $('.chat-frame');
    frames.find('chatinput').focus(false);
    if (frames) {
      for (i=0; i<frames.length; i++) {
        frames[i].contentWindow.windowActive = false;
      }
    }
    var subWindow = $('#chat-frame-' + target)[0];
    if (subWindow) {
      subWindow.contentWindow.unread = 0;
      subWindow.contentWindow.windowActive = true;
      if (subWindow.contentWindow.updateTitle)
        subWindow.contentWindow.updateTitle();
    }
  }
  
  function openNewRoom() {
    if (!gtabs) {
      gtabs = new Array();
    }
    gtabs.push('' + frameCount);
    try {
//      new mdui.Dialog('#chat-new-room').close();
      dialogNewRoom.close();
    } catch(e) {
        console.log('chat-new-room close err', e);
    }
    var room = $$('#chat-new-room-text').val();
//    console.log('going to', room);
    var inst = new mdui.Tab('#chat-tabs');
    var frames = $$('#chat-frames');
    var tabs = $$('#chat-tabs');
    var target = 'chat-frame-' + frameCount;
    var target_tab = 'chat-tab-' + frameCount;
    var mtab = $$('<a href="#' + target + '" class="mdui-ripple chat-tab" onclick="tabShow(\'' + frameCount + '\');" id="' + target_tab + '">' + room + '</a>');
    var mframe = $$('<iframe src="core.html?' + room + '&tabId=' + frameCount + '" frameborder="0" width="100%" seamless class="chat-frame" id="' + target + '"></iframe>');
    $$(tabs).append(mtab);
    $$(frames).append(mframe);
    tabShow(frameCount);
    frameCount = frameCount + 1;
    
    mdui.mutation();
    resize();
    setTimeout(resize, 2000);
  }
  
  function closeRoom(tid) {
    if (!tid) {
      tid = tabNow;
    }
    var target = 'chat-frame-' + tid;
    var target_tab = 'chat-tab-' + tid;
    $$('#' + target).remove();
    $$('#' + target_tab).remove();
    
//    console.log('tid', tid);
    var index = gtabs.indexOf(tid);
//    delete gtabs[index];
    gtabs[index] = undefined;
    var found = false;
    for (i=index; i<gtabs.length; i++) {
      if (gtabs[i] != undefined) {
//        var target2 = 'chat-frame-' + gtabs[i];
        tabShow(gtabs[i]);
        found = true;
        break;
      }
    }
    if (!found) {
      for (i=index; i>=0; i--) {
        if (gtabs[i] != undefined) {
//          var target2 = 'chat-frame-' + gtabs[i];
          tabShow(gtabs[i]);
          found = true;
          break;
        }
      }
    }
    if (!found) {
//      new mdui.Dialog($$('#chat-new-room')).open();
      dialogNewRoom.open();
    }
    
//    if (tid > 0) {
//      var target2 = 'chat-frame-' + (tid - 1);
//      tabShow(target2);
//    } else {
//      
//    }
  }
  
  function imgbedUpload() {
//    getToken('LanceLiang2018', '1352040930lxr').then(token => {
//      uploadImage($('#file').get(0).files[0], token).then(url => {
//        console.log(url);
//        $('#imgbed-result').append($('<a href="' + url + '" target="_blank">图像链接</a>'));
//        $('#imgbed-result').append($('<div class="mdui-textfield"><textarea class="mdui-textfield-input" type="text" autocomplete="off" autofocus="" value="![img](' + url + ')"></textarea></div>'));
//      }).fail(function() {console.log('upload Failed');});
//    }).fail(function() {console.log('getToken Failed')});
//  }
    uploadImage($_('#file').get(0).files[0], imgToken).then(url => {
      console.log(url);
      $('#imgbed-result').append($('<a href="' + url + '" target="_blank">图像链接</a>'));
      $('#imgbed-result').append($('<div class="mdui-textfield"><textarea class="mdui-textfield-input" type="text" autocomplete="off" autofocus="" value="![img](' + url + ')"></textarea></div>'));
    }).fail(function() {console.log('upload Failed');});
  }
  
  dialogNewRoom = new mdui.Dialog('#chat-new-room', {
      history: false
  });
//  setTimeout(function() {
//    dialogNewRoom.open();
//    console.log('Tryed');
//  }, 2000);
  dialogNewRoom.open();
//  openNewRoom();
</script>
</body>
</html>